<!-- 屏幕监控详细信息 -->
<template>
  <bs-dialog :title="$t('屏幕监控详细信息')" :visible.sync="editor" size="default" @closed="doCloseEdit" class="deviceDialog">
    <template slot="main">
      <div v-if="editor">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="$t('基本属性')" name="first">
            <basic-set-info :editor-form="formData"></basic-set-info>
          </el-tab-pane>
          <el-tab-pane :label="$t('屏幕监控')" name="second">
            <screen-status :screen-id="screenId" :id="terminalId"></screen-status>
          </el-tab-pane>
          <el-tab-pane :label="$t('播放监控')" name="thread">
            <paly-monitor-info :screen-id="screenId" :terminal-id="terminalId"></paly-monitor-info>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template slot="footer">
      <bs-refresh-button-icon :show-icon="false" @click.native="doRefresh"></bs-refresh-button-icon>
      <bs-cancel-button-icon @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import BasicSetInfo from "./BasicSetInfo"
import ScreenStatus from './ScreenStatus'
import PalyMonitorInfo from './PalyMonitorInfo'
export default {
  name: 'ScreenStateInfoDialog',
  data() {
    return {
      activeName: 'first',
      editor: false,
      formData: {},
      screenId: 0,
      terminalId: 0
    }
  },
  created() {
    this.$eventBus.$on('doScreenStateInfo', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('doScreenStateInfo')
  },
  components: {
    BasicSetInfo,
    ScreenStatus,
    PalyMonitorInfo
  },
  methods: {
    // 显示
    show(form, screenId, id) {
      this.terminalId = id
      this.screenId = screenId
      this.formData = form
      this.activeName = 'first'
      this.editor = true
    },
    // 关闭
    doCloseEdit: function () {
      this.editor = false;
      this.$store.dispatch('device/saveWebsocketData', `{'cmd': 36, 'data': ''}`)
    },
    handleDrag() {
      this.$refs.select.blur()
    },
    doRefresh() {
      if(this.activeName === 'first') {
        this.$eventBus.$emit('doShowScreenState')
      } else if(this.activeName === 'second') {
         this.$eventBus.$emit('doShowScreenResutl')
      }else if(this.activeName === 'thread') {
         this.$eventBus.$emit('doPlayScreenMonitorInfoRefresh')
      }
      this.$message.success('刷新成功');
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog {
    width: 800px;
    height: 650px;
}
</style>
